<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@ include file="../common/common.jsp"%>
<title>商品添加</title>
<link rel="stylesheet" href="${ctx}/lib/editor/editor.css" />
<script type="text/javascript" src="${ctx}/lib/editor/editor.js"></script>
<script type="text/javascript" src="${ctx}/lib/editor/markdownit.js"></script>
<script src="${ctx}/js/plupload.full.min.js"></script>
<script src="${ctx}/js/qiniu.min.js"></script>
</head>
<body>
<article class="page-container">
    <form class="form form-horizontal" id="form" action="" method="post">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>所属品类：</label>
            <div class="formControls col-xs-8 col-sm-8">
               <span class="select-box">
					<select id="categoryId" name="categoryId" class="select" required>
						<c:forEach items="${categoryList}" var="category">
							<option value="${category.id}">${category.name}</option>
						</c:forEach>
					</select>
				</span>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>商品名称：</label>
            <div class="formControls col-xs-8 col-sm-8">
                <input type="text" class="input-text" value="" id="productName" name="productName" required="true">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>配送方式：</label>
            <div class="formControls col-xs-8 col-sm-8">
                <span class="select-box">
					<select id="deliver" name="deliver" class="select" required>
						<option value="快递">快递</option>
						<option value="平邮">平邮</option>
					</select>
				</span>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>运费(元)：</label>
            <div class="formControls col-xs-8 col-sm-8">
                <input type="text" class="input-text" value="" placeholder="" id="deliverFee" name="deliverFee" required="true">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>排序：</label>
            <div class="formControls col-xs-8 col-sm-8">
                <input type="text" class="input-text" value="" placeholder="" id="sort" name="sort" required="true">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>商品简介：</label>
            <div class="formControls col-xs-8 col-sm-8">
				<textarea id="productSummary" name="productSummary" class="textarea"  placeholder="简单介绍下商品...最少输入10个字符" datatype="*10-200" dragonfly="true" nullmsg="备注不能为空！" onKeyUp="textarealength(this,200)"></textarea>
				<p class="textarea-numberbar"><em class="textarea-length">0</em>/200</p>
            </div>
        </div>
        <div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>小图片：</label>
			<img id="smallImage" width='60' height='60' class='product-thumb' onerror="this.src='${ctx}/images/pic_default.png'" src=''>
		</div>
		<div class="row cl">
            <div id="container" class="col-xs-8 col-sm-8 col-xs-offset-4 col-sm-offset-3">
                <button id="pickfiles1" class="btn radius" type="button"><i class="Hui-iconfont">&#xe642;</i> 上传</button>
            	<input id="smallImageUrl" type="hidden" value=""/>
            </div>
        </div>
        <div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>展示图片：</label>
			<img id="listImage" width='120' height='120' class='product-thumb' onerror="this.src='${ctx}/images/pic_default.png'" src=''>
		</div>
		<div class="row cl">
            <div id="container" class="col-xs-8 col-sm-8 col-xs-offset-4 col-sm-offset-3">
                <button id="pickfiles2" class="btn radius" type="button"><i class="Hui-iconfont">&#xe642;</i> 上传</button>
            	<input id="listImageUrl" type="hidden" value=""/>
            </div>
        </div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3">其它图片：</label>
			<ul class="cl portfolio-area">
				<li class="item">
					<div class="portfoliobox">
						<input id="otherImageCb1" class="checkbox" name="" type="checkbox" value="">
						<div class="picbox"><img id="otherImage1" width='140' height='140' src="" onerror="this.src='${ctx}/images/pic_default.png'"></div>
						<input id="otherImageUrl1" type="hidden" value=""/>
					</div>
				</li>
				<li class="item">
					<div class="portfoliobox">
						<input id="otherImageCb2" class="checkbox" name="" type="checkbox" value="">
						<div class="picbox"><img id="otherImage2" width='140' height='140' src="" onerror="this.src='${ctx}/images/pic_default.png'"></div>
						<input id="otherImageUrl2" type="hidden" value=""/>
					</div>
				</li>
				<li class="item">
					<div class="portfoliobox">
						<input id="otherImageCb3" class="checkbox" name="" type="checkbox" value="">
						<div class="picbox"><img id="otherImage3" width='140' height='140' src="" onerror="this.src='${ctx}/images/pic_default.png'"></div>
						<input id="otherImageUrl3" type="hidden" value=""/>
					</div>
				</li>
			</ul>
			<label class="form-label col-xs-4 col-sm-3"></label>
			<ul class="cl portfolio-area">
				<li class="item">
					<div class="portfoliobox">
						<input id="otherImageCb4" class="checkbox" name="" type="checkbox"
							value="">
						<div class="picbox">
							<img id="otherImage4" width='140' height='140'
								src="" onerror="this.src='${ctx}/images/pic_default.png'">
						</div>
						<input id="otherImageUrl4" type="hidden" value="" />
					</div>
				</li>
				<li class="item">
					<div class="portfoliobox">
						<input id="otherImageCb5" class="checkbox" name="" type="checkbox"
							value="">
						<div class="picbox">
							<img id="otherImage5" width='140' height='140'
								src="" onerror="this.src='${ctx}/images/pic_default.png'">
						</div>
						<input id="otherImageUrl5" type="hidden" value="" />
					</div>
				</li>
				<li class="item">
					<div class="portfoliobox">
						<input id="otherImageCb6" class="checkbox" name="" type="checkbox"
							value="">
						<div class="picbox">
							<img id="otherImage6" width='140' height='140'
								src="" onerror="this.src='${ctx}/images/pic_default.png'">
						</div>
						<input id="otherImageUrl6" type="hidden" value="" />
					</div>
				</li>
			</ul>
		</div>
		<div class="row cl">
            <div id="container" class="col-xs-8 col-sm-8 col-xs-offset-4 col-sm-offset-3">
                <button id="pickfiles3" class="btn radius" type="button"><i class="Hui-iconfont">&#xe642;</i> 上传</button>
                <button onclick="deleteOtherImage()" class="btn btn-warning-outline radius" type="button"><i class="Hui-iconfont">&#xe60b;</i> 删除</button>
            </div>
        </div>
        <div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>商品详情：</label>
            <div class="formControls col-xs-8 col-sm-8">
				<textarea id="content" name="content" class="textarea" rows="10" ></textarea>
            </div>
        </div>
        <div class="row cl">
            <div class="col-xs-8 col-sm-8 col-xs-offset-4 col-sm-offset-3">
                <button class="btn btn-primary radius" type="submit"><i class="Hui-iconfont">&#xe632;</i> 保存</button>
            </div>
        </div>
    </form>
</article>

<script type="text/javascript">
	function checked(id){
		return $("#"+id).prop("checked");
	}
	function deleteOtherImage(){
		var defaultImage = "images/pic_default.png";
		if(checked("otherImageCb1")){
			$("#otherImage1").attr("src", defaultImage);
			$("#otherImageUrl1").val("");
			$("#otherImageCb1").prop("checked", false);
		}
		if(checked("otherImageCb2")){
			$("#otherImage2").attr("src", defaultImage);
			$("#otherImageUrl2").val("");
			$("#otherImageCb2").prop("checked", false);
		}
		if(checked("otherImageCb3")){
			$("#otherImage3").attr("src", defaultImage);
			$("#otherImageUrl3").val("");
			$("#otherImageCb3").prop("checked", false);
		}
		if(checked("otherImageCb4")){
			$("#otherImage4").attr("src", defaultImage);
			$("#otherImageUrl4").val("");
			$("#otherImageCb4").prop("checked", false);
		}
		if(checked("otherImageCb5")){
			$("#otherImage5").attr("src", defaultImage);
			$("#otherImageUrl5").val("");
			$("#otherImageCb5").prop("checked", false);
		}
		if(checked("otherImageCb6")){
			$("#otherImage6").attr("src", defaultImage);
			$("#otherImageUrl6").val("");
			$("#otherImageCb6").prop("checked", false);
		}
	}
</script>

<script type="text/javascript">
	var editor = new Editor({
		element : $("#content")[0],
		status : []
	});
	editor.render();
</script>

<script type="text/javascript">
	function initUploader(buttonId) {
		var uploader = Qiniu.uploader({
			runtimes : 'html5,flash,html4', // 上传模式，依次退化
			browse_button : buttonId, // 上传选择的点选按钮，必需
			filters : {
				mime_types : [ {
					title : "Image files",
					extensions : "jpg,gif,png"
				} ]
			},//上传的文件类型
			// 在初始化时，uptoken，uptoken_url，uptoken_func三个参数中必须有一个被设置
			// 切如果提供了多个，其优先级为uptoken > uptoken_url > uptoken_func
			// 其中uptoken是直接提供上传凭证，uptoken_url是提供了获取上传凭证的地址，如果需要定制获取uptoken的过程则可以设置uptoken_func
			uptoken_func : function(file) { // 在需要获取uptoken时，该方法会被调用
				var uptoken = "";
				$.ajax({
					type : 'GET',
					url : ctx + '/upload/getUploadToken.do',
					async : false,
					cache : false,
					data : {},
					dataType : 'json',
					timeout : 30000,
					context : $('body'),
					success : function(data) {
						if (data.code == "ok") {
							uptoken = data.object;
						} else {
							layer.msg(data.msg,{icon: 5,time:2000});
						}
					}
				});
				return uptoken;
			},
			get_new_uptoken : false, // 设置上传文件的时候是否每次都重新获取新的uptoken
			// downtoken_url: '/downtoken',
			// Ajax请求downToken的Url，私有空间时使用，JS-SDK将向该地址POST文件的key和domain，服务端返回的JSON必须包含url字段，url值为该文件的下载地址
			unique_names : true, // 默认false，key为文件名。若开启该选项，JS-SDK会为每个文件自动生成key（文件名）
			// save_key: true,                  // 默认false。若在服务端生成uptoken的上传策略中指定了sava_key，则开启，SDK在前端将不对key进行任何处理
			domain : '${domain}', // bucket域名，下载资源时用到，必需
			container : 'container', // 上传区域DOM ID，默认是browser_button的父元素
			max_file_size : '1mb', // 最大文件体积限制
			flash_swf_url : 'path/of/plupload/Moxie.swf', //引入flash，相对路径
			max_retries : 3, // 上传失败最大重试次数
			dragdrop : true, // 开启可拖曳上传
			drop_element : 'container', // 拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
			chunk_size : '1mb', // 分块上传时，每块的体积
			auto_start : true, // 选择文件后自动上传，若关闭需要自己绑定事件触发上传
			//x_vars : {
			//    查看自定义变量
			//    'time' : function(up,file) {
			//        var time = (new Date()).getTime();
			// do something with 'time'
			//        return time;
			//    },
			//    'size' : function(up,file) {
			//        var size = file.size;
			// do something with 'size'
			//        return size;
			//    }
			//},
			init : {
				'FilesAdded' : function(up, files) {
					plupload.each(files, function(file) {
						// 文件添加进队列后，处理相关的事情
					});
				},
				'BeforeUpload' : function(up, file) {
					// 每个文件上传前，处理相关的事情
				},
				'UploadProgress' : function(up, file) {
					// 每个文件上传时，处理相关的事情
				},
				'FileUploaded' : function(up, file, info) {
					layer.msg('上传成功！',{icon: 6,time:2000});
					// 每个文件上传成功后，处理相关的事情
					// 其中info是文件上传成功后，服务端返回的json，形式如：
					// {
					//    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
					//    "key": "gogopher.jpg"
					//  }
					// 查看简单反馈
					// var domain = up.getOption('domain');
					var res = JSON.parse(info);
					// var sourceLink = domain + res.key; 获取上传成功后的文件的Url
					//alert(res.key);

					if(buttonId == 'pickfiles1'){
						var imgLink = Qiniu.imageView2({
							mode : 5, // 缩略模式，共6种[0-5],3代表进行等比缩放，不裁剪
							w : 60, // 具体含义由缩略模式决定
							h : 60, // 具体含义由缩略模式决定
							q : 100, // 新图的图像质量，取值范围：1-100
							format : 'png' // 新图的输出格式，取值范围：jpg，gif，png，webp等
						}, res.key);
						$("#smallImage").attr("src", imgLink);
						$("#smallImageUrl").val(imgLink);
					}
					if(buttonId == 'pickfiles2'){
						var domain = '${domain}';
						var imgLink = domain + "/" + res.key;
						$("#listImage").attr("src", imgLink);
						$("#listImageUrl").val(imgLink);
					}
					if(buttonId == 'pickfiles3'){
						var otherImageUrl1 = $("#otherImageUrl1").val();
						var otherImageUrl2 = $("#otherImageUrl2").val();
						var otherImageUrl3 = $("#otherImageUrl3").val();
						var otherImageUrl4 = $("#otherImageUrl4").val();
						var otherImageUrl5 = $("#otherImageUrl5").val();
						var otherImageUrl6 = $("#otherImageUrl6").val();
						
						var domain = '${domain}';
						var imgLink = domain + "/" + res.key;
						
						if(empty(otherImageUrl1)){
							$("#otherImage1").attr("src", imgLink);
							$("#otherImageUrl1").val(imgLink);
						}else if(empty(otherImageUrl2)){
							$("#otherImage2").attr("src", imgLink);
							$("#otherImageUrl2").val(imgLink);
						}else if(empty(otherImageUrl3)){
							$("#otherImage3").attr("src", imgLink);
							$("#otherImageUrl3").val(imgLink);
						}else if(empty(otherImageUrl4)){
							$("#otherImage4").attr("src", imgLink);
							$("#otherImageUrl4").val(imgLink);
						}else if(empty(otherImageUrl5)){
							$("#otherImage5").attr("src", imgLink);
							$("#otherImageUrl5").val(imgLink);
						}else if(empty(otherImageUrl6)){
							$("#otherImage6").attr("src", imgLink);
							$("#otherImageUrl6").val(imgLink);
						}
					}
 					
				},
				'Error' : function(up, err, errTip) {
					layer.msg(errTip,{icon: 5,time:2000});
					//上传出错时，处理相关的事情
				},
				'UploadComplete' : function() {
					//队列文件处理完毕后，处理相关的事情
				},
				'Key' : function(up, file) {
					// 若想在前端对每个文件的key进行个性化处理，可以配置该函数
					// 该配置必须要在unique_names: false，save_key: false时才生效

					var key = "";
					// do something with key here
					return key
				}
			}
		});
	}
	initUploader('pickfiles1');
	initUploader('pickfiles2');
	initUploader('pickfiles3');
</script>

<script type="text/javascript">
$(document).ready(function () {
	 $('#form').bind('submit', function () {
		var categoryId = $("#categoryId").val();
		var listImage = $("#listImageUrl").val();
		var smallImage = $("#smallImageUrl").val();
		var images = "";
		var name = $("#productName").val();
		var summary = $("#productSummary").val();
		var detail = $("#content").val();
		var deliver = $("#deliver").val();
		var deliverFee = $("#deliverFee").val();
		var sort = $("#sort").val();
		
		var otherImageUrl1 = $("#otherImageUrl1").val();
		var otherImageUrl2 = $("#otherImageUrl2").val();
		var otherImageUrl3 = $("#otherImageUrl3").val();
		var otherImageUrl4 = $("#otherImageUrl4").val();
		var otherImageUrl5 = $("#otherImageUrl5").val();
		var otherImageUrl6 = $("#otherImageUrl6").val();
		
		images = otherImageUrl1 + "," + otherImageUrl2 + "," + otherImageUrl3 + "," + otherImageUrl4 + "," + otherImageUrl5 + "," + otherImageUrl6;
		
		$.ajax({
			type : 'POST',
			url : ctx + '/productManage/addProduct.do',
			data : {
				categoryId : categoryId,
				listImage : listImage,
				smallImage : smallImage,
				images : images,
				name : name,
				summary : summary,
				detail : detail,
				deliver : deliver,
				deliverFee : deliverFee,
				sort : sort
			},
			dataType : 'json',
			timeout : 30000,
			context : $('body'),
			success : function(data) {
				if (data.code == "ok") {
                    layer.msg("保存成功!", {icon: 6, time: 1000}, function () {
                    	layer_close();
                    });
				} else {
					 layer.msg(data.msg, {icon: 5, time: 2000});
				}
			},
			error : function(xhr, type) {
				layer.msg('保存失败!', {icon: 5, time: 2000});
			}
		});
		  return false;
	 });
});
</script>
</body>
</html>